<template>
    <div class="list" ref="warrape">
        <div>
            <div class="area">
                <div class="title border-topbottom">您的位置</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{this.$store.state.city}}</div>
                    </div>             
                </div>
                
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                    <div class="button-list">
                       <div class="button-wrapper" v-for="item of hot" :key="item.id" @click="headleCityClick(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>                                     
                </div>
            </div>           
            <div class="area" v-for="(item,key) of cities" :key="key" :ref="key" >
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                    <div class="item border-topbottom" v-for="innerItem of item" :key="innerItem.id" @click="headleCityClick(innerItem.name)">
                        {{innerItem.name}}</div>                  
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
name:'CityList',
    props: {
        hot:Array,
        cities:Object,
        letter:String
    },
    // 方法
    //dispatch派遣
    methods: {
       headleCityClick(city){          
           this.$store.dispatch("changeCity", city)
           this.$router.push({ name: 'Home'})
           console.log(city)
           
       }
    },
    // 上下滑动功能
    mounted () {
        this.scroll=new Bscroll(this.$refs.warrape)
    },
    //监控letter 的变幻，根据父组件传递的值进行相应的跳转
    watch: {
        letter(){
            if(this.letter){
                const element=this.$refs[this.letter][0]
                this.scroll.scrollToElement(element)
            }
            // console.log(this.letter)
        }        
    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl";
.border-topbottom &:before{
    border-color:#ccc
}
.border-topbottom &:after{
    border-color:#ccc
}
.border-bottom & before{
    background-color #ccc

}
.list{
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    overflow hidden
    background #e9f3f5
}
.title{
    line-height: 0.5rem;
    padding-left: 0.2rem;
    color: #666;
    height: 0.5rem;
    font-size: 0.26rem;
    border-bottom: 1px solid rgba(17,34,17,0.1);
    border-top: 1px solid rgba(17,34,17,0.1);
}
.button-list{
    overflow hidden
    padding .1rem .6rem .1rem .1rem
    background #ffffff

}
.button-wrapper{
    float left
    width 33.33%

}
.button{
    margin .1rem
    padding .1rem
    text-align center
    border .02rem solid #cccccc
    border-radius .1rem
}
.item-list .item{
    line-height .76rem
    border-bottom: 1px solid rgba(17,34,17,0.1);
    padding-left .2rem
}
.item{
    background #fff
}
</style>
